<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件和子组件</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			
			<c2></c2>
			<cp3></cp3>
			<!-- <cp4></cp4> -->
		</div>
		<script type="text/javascript">
			//1.创建第一个组件构造器
			const cpn1 = Vue.extend({
				template:'<div><h2>xieyingpeng</h2></div>'
			});
			//2.创建第二个组件构造器
			const cpn2 = Vue.extend({
				template:'<div><h2>dashabi</h2><c1></c1></div>',
				components:{
					c1:cpn1 //在第二个组件中注册第一个组件  第二个组件是父组件   第一个是子组件   只能在这个模板中使用  如果要在外面使用 则需要重新注册
				}
			});
			//但是现在不这样注册了   意思就是不使用extedn()方法创建组件
			//现在是直接这样注册
			  Vue.component('cp3',{
				  template:'<div><h2>dashabi</h2><c1></c1></div>'
			  })
			
			
			/* Vue.component('cp',cpn1); *///全局组件
			var app = new Vue({
				el:'#app',
				data:{
					
				},
				components:{//局部组件
					c2:cpn2
				},
				/* //注册局部组件
				components:{
					'cp4':{
						template:'<div><h2>dashabi</h2><c1></c1></div>'
					}
				} */
				
			});
		</script>
	</body>
</html>
